<!--
 * @Author: wuchao66_Git 2803670835@qq.com
 * @Date: 2023-11-08 14:57:01
 * @LastEditors: wuchao66_Git 2803670835@qq.com
 * @LastEditTime: 2023-11-08 14:57:47
 * @FilePath: \t161xgvue\src\components\Menu.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
      <!-- 思路 ：
1、递归，如果数据元素存在子树（children），调用Menu组件自身，
传递子树数据(item.children)。
2、 有子树用el-submenu，反之用 el-menu-item 。 -->
      <div v-for="(item, index) in menuData" :key="index">
         <!-- 思路: 有子元素使用el-submenu 没有子元素使用el-menu-item -->
        <el-submenu 
          :index="item.id + ''"
          v-if="item.childMenus && item.childMenus.length > 0"
          :key="item.id + ''"
        >
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title" style="color: azure;">{{ item.menuName }}</span>
          </template>
          <!-- //递归调用 -->
          <Menu :menuData="item.childMenus"></Menu>
        </el-submenu>
        <el-menu-item 
          v-else
          :index="item.url + ''"
          :route="item.url"
          :key="item.id + ''"
        >
          <i :class="item.icon"></i>
          <span>{{ item.menuName }}</span>
        </el-menu-item>
      </div>
    </div>
</template>

<script>
export default {//父子组件传参 
  //递归 这个名称要保持驼峰转短横线链接规则
    name: "Menu",//名字必须写，有用
    props: {
      menuData: {
        type: Array,
        default: []
      },
    },
}
</script>
<style>
 .el-menu--collapse span,
  .el-menu--collapse i.el-submenu__icon-arrow {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
    /* background-color: black;
    color: aliceblue; */
  }
</style>